<template>
    <div class="enter_main">
        <div class="info_card">
            <div class="doc_item">
                <div class="info_l">
                    <van-image width="50" round height="50" src="https://img.yzcdn.cn/vant/cat.jpeg" />
                </div>
                <div class="info_r">
                    <p @click="navigateTo('/doctor-main', '沈宁')">
                        <span class="title">沈宁</span>
                        <span class="href">医生详情>></span>
                    </p>
                    <p>
                        <span class="desc">主任医师 | 内科</span>
                    </p>
                    <p>
                        中国医科大学附属第一医院
                        <span class="tag">三级甲等</span>
                    </p>
                </div>
            </div>
            <div class="closed_info">
                <span class="title">擅长：</span>
                <span v-if="!showMore" class="short_title">从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年</span>
                <div v-if="showMore" style="color:#999;text-align:justify">
                    从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年
                </div>
                <p class="action" @click="showMore = !showMore">
                    <van-icon :name="showMore ? 'arrow-up' : 'arrow-down'" size="20" color="#999" />
                </p>
            </div>
        </div>
        <div class="service_title">出诊排班</div>
        <div class="doctor_work">
            <van-row style="margin-top:20px" class="fk_row">
                <van-col class="work_item" span="3">日期</van-col>
                <van-col class="work_item" span="3">
                    <span>12/11</span>
                    <span class="now">今</span>
                </van-col>
                <van-col class="work_item" span="3">
                    <span>12/12</span>
                    <span>一</span></van-col>
                <van-col class="work_item" span="3">
                    <span>12/13</span>
                    <span>二</span>
                </van-col>
                <van-col class="work_item" span="3">
                    <span>12/14</span>
                    <span>三</span>
                </van-col>
                <van-col class="work_item" span="3">
                    <span>12/15</span>
                    <span>四</span>
                </van-col>
                <van-col class="work_item" span="3">
                    <span>12/16</span>
                    <span>五</span>
                </van-col>
                <van-col class="work_item" span="3">
                    <span>12/17</span>
                    <span>六</span>
                </van-col>
            </van-row>
            <van-row>
                <van-col class="work_item" span="3">图文</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item out" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
            </van-row>
            <van-row style="margin-bottom:20px">
                <van-col class="work_item" span="3">视频</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
                <van-col class="work_item" span="3">出诊</van-col>
            </van-row>
        </div>

        <div class="service_title">服务类型</div>
        <div style="width:100%;background:#fff;float:left">

            <div class="card_item" @click="navigateTo('/pic-arti')">
                <div class="left">
                    <div class="icon_main">
                        <van-icon name="chat" color="#fff" size="30" />
                    </div>
                </div>
                <div class="right">
                    <div><span>图文问诊</span><span>￥30/次起</span></div>
                    <div>通过文字、图文及语音和医生在线问诊</div>
                </div>
            </div>
            <div class="card_item" @click="navigateTo('/video')">
                <div class="left">
                    <div class="icon_main">
                        <van-icon name="video" color="#fff" size="30" />
                    </div>
                </div>
                <div class="right">
                    <div><span>视频问诊</span><span>￥30/次起</span></div>
                    <div>医生在线视频诊断和处方下达，药品配送</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showMore: false
        };
    },
    methods: {
        navigateTo(path, name) {
            this.$router.push({
                path,
                query: {
                    name: name || ""
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.enter_main {
    background: #fff;
}
.info_card {
    width: 92vw;
    margin: 4vw;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.href {
    color: #00aac6;
    margin-left: 20px;
}
.closed_info {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    .short_title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        color: #999;
    }
    .title {
        color: #999;
        float: left;
        width: 50px;
    }
    span {
        width: calc(100% - 70px);
        color: #999;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .action {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
}
.service_title {
    width: 100%;
    padding-left: 4vw;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    color: #333;
}
.card_item {
    width: 92vw;
    margin: 4vw;
    border-radius: 10px;
    height: 80px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon_main {
            width: 40px;
            height: 40px;
            background: #00aac6;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
        }
    }
    .right {
        font-size: 14px;
        color: #999;
        flex: 1;
        padding: 0 10px;
        box-sizing: border-box;
        div:nth-of-type(1) {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        span {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            &:nth-of-type(2) {
                color: #fd8119;
                font-size: 15px;
            }
        }
    }
}
.doctor_work {
    padding: 0 15px;
}

.work_item {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    border: 1px solid #ebebe8;
    padding: 6px 0;
    span.now {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #00aac6;
        color: #fff;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }
    &.out {
        color: #fd8119;
    }
}
.fk_row {
    background: #e2f4f9;
    .work_item {
        height: 60px;
    }
}
</style>
